     <template>
        <div>
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{ item.meta.title
              }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="container">
            <div>
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
                <el-form-item label="评论人" >
                  <el-select v-model="ruleForm.userId" filterable placeholder="请选择评论人">
                    <el-option
                    v-for="item in use" :key="item.userId" :label="item.username" :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="评论文章">
                  <el-select v-model="ruleForm.articleId" filterable placeholder="请选择评论的文章标题">
                    <el-option 
                    v-for="item in art" :key="item.articleId" :label="item.articleName" :value="item.articleId">
                  </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="评论内容" prop="content">
                  <el-input v-model="ruleForm.content" type="content" />
                </el-form-item>
                <el-form-item label="评论状态" prop="state">
                  <el-radio-group v-model="ruleForm.state">
                    <el-radio :label="0">已删除</el-radio>
                    <el-radio :label="1">创建</el-radio>
                    <!-- <el-radio :label="2">已出票</el-radio> -->
                  </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="评论时间" prop="updatedAt">
                  <el-date-picker v-model="ruleForm.updatedAt" type="updatedAt" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item> -->
              </el-form>
            </div>
            <div>
              <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
              <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
            </div>
          </div>
        </div>
      </template>
      <script>
      import { useRouter, useRoute } from 'vue-router'
      import { ref, reactive, watch } from "vue";
      import request from "../../utils/request";
      import { ElNotification } from "element-plus";
      export default {
        setup() {
          let breadList = [] // 路由集合
          let use=ref([])//评论人集合
          let art=ref([])//评论文章标题集合
          const route = useRoute()
          const getBreadcrumb = (url) => {
            let matched = url.matched;
            //如果不是首页
            if ("Home" == matched[0].name) {
              matched[0].meta = { title: "系统首页" }
            }
            breadList = matched;
          }
          watch(route, (newValue, oldValue) => {
            // console.log(222222,newValue)
            getBreadcrumb(newValue)
          }, { deep: true, immediate: true });
      
          const resetForm = (formEl) => {
            if (!formEl) return;
            formEl.resetFields();
          };
          const submitForm = async (formEl) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
              if (valid) {
                // console.log("提交更新", fields);
                request
                  .request({
                    url: "/comment/add",
                    method: "post",
                    data: {
                      userId: ruleForm.userId,
                      content: ruleForm.content,
                      articleId: ruleForm.articleId,
                      state: ruleForm.state,
                      // updatedAt: ruleForm.updatedAt,
                    },
                  })
                  .then((res) => {
                    if (res.data.code == 200) {
                      ElNotification({
                        title: "更新成功",
                        message: "成功更新订单信息",
                      });
                    } else {
                      ElNotification({
                        title: "更新失败",
                        message: "请联系管理员检查失败原因",
                      });
                    }
                  })
                  .catch((e) => {
                    ElNotification({
                      title: "更新失败",
                      message: "请联系管理员检查失败原因",
                    });
                  });
              } else {
                ElNotification({
                  title: "校验失败",
                  message: "请重新填写信息",
                });
              }
            });
          };
          const ruleForm = reactive({
            userId: "",
            content: "",
            articleId: "",
            state: 1,
            // updatedAt: "",
          });
          const rules = reactive({
            // userId: [
            //   {
            //     required: true,
            //     message: "请选择评论人id",
            //     trigger: "blur",
            //   },
            // ],
            content: [
              {
                required: true,
                message: "评论内容",
                trigger: "blur",
              },
            ],
            // articleId: [
            //   {
            //     required: true,
            //     message: "请选择评论文章的id",
            //     trigger: "blur",
            //   },
            // ],
            state: [
              {
                required: false,
                message: "请选择评论状态",
                trigger: "blur",
              },
            ],
            // updatedAt: [
            //   {
            //     required: true,
            //     message: "请选择评论完成时间",
            //     trigger: "change",
            //   },
            // ],
      
          });
          const getUsername=()=>{
            request.request({
              url:"/user/getAllUsers",
              method:'get',
            }).then((res)=>{
              //获取当页数据
              use.value=res.data.data
      console.log(JSON.stringify(use)+"所有用户");
            }).catch((e)=>{
              console.log(e);
            })
          };
          getUsername();
          const getArticleName=()=>{
            request.request(
              {
                url:'/article/getAllArticle',
                method:'get'
              }
            ).then((res)=>{
              art.value=res.data.data
              console.log(JSON.stringify(use)+'所有用户');
            }).catch((e)=>{
              console.log(e);
            })
          }
          getArticleName()
          const ruleFormRef = ref();
          const centerDialogVisible = ref(false);
          return {
            breadList,
            resetForm,
            ruleFormRef,
            submitForm,
            ruleForm,
            rules,
            centerDialogVisible,
            getUsername,
            getArticleName,
            use,
            art
          };
        },
      };
      </script>
      <style lang="scss" scoped>
      .handle-box {
        margin-bottom: 20px;
      }
      
      .handle-select {
        width: 120px;
      }
      
      .handle-input {
        width: 300px;
        display: inline-block;
      }
      
      .table {
        width: 100%;
        font-size: 14px;
      }
      
      .red {
        color: #ff0000;
      }
      
      .mr10 {
        margin-right: 10px;
      }
      
      .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
      }
      </style>
        